<script setup lang="ts">
import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "../utils/rule";
import { FormProps } from "../utils/types";
import { usePublicHooks } from "../../hooks";
import { InfoFilled,Plus,Minus } from '@element-plus/icons-vue'
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    title: "新增",
    higherDeptOptions: [],
    department_id: 0, nickname: "", username: "", password: "", phone: "",ip_list: "",
    email: "", sex: "", status: 1, remark: "", shop_type:'2', shop_ids:[],shopList:[],sales_target:100000
  })
});

const sexOptions = [
  { value: 2, label: "女"},
  { value: 1, label: "男"}
];
const ruleFormRef = ref();
const { switchStyle } = usePublicHooks();
const newFormInline = ref(props.formInline);
console.log(555,newFormInline.value)
function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="82px">
    <el-row :gutter="30">
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="员工姓名" prop="nickname">
          <el-input v-model="newFormInline.nickname" clearable placeholder="请输入员工姓名"/>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="newFormInline.phone" clearable placeholder="请输入手机号"/>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="登录账号" prop="username">
          <el-input v-model="newFormInline.username" clearable placeholder="请输入登录账号"/>
        </el-form-item>
      </re-col>
      <re-col v-if="newFormInline.title === '新增'" :value="12" :xs="24" :sm="24">
        <el-form-item label="登录密码" prop="password">
          <el-input v-model="newFormInline.password" clearable placeholder="请输入用户登录密码"/>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="newFormInline.email" clearable placeholder="请输入邮箱"/>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="用户性别">
          <el-select v-model="newFormInline.gender" placeholder="请选择用户性别" class="w-full" clearable>
            <el-option v-for="(item, index) in sexOptions" :key="index" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="归属部门">
          <el-cascader v-model="newFormInline.department_id" class="w-full" :options="newFormInline.higherDeptOptions"
            :props="{ value: 'id', label: 'name', emitPath: false,  checkStrictly: true }"
            clearable filterable placeholder="请选择归属部门">
            <template #default="{ node, data }">
              <span>{{ data.name }}</span>
              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
            </template>
          </el-cascader>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="用户状态">
          <el-switch v-model="newFormInline.status" inline-prompt :active-value="1" :inactive-value="0" active-text="启用" inactive-text="停用" :style="switchStyle"/>
        </el-form-item>
      </re-col>


      <re-col :value="24">
        <el-form-item label="用户角色" prop="roles">
          <el-select  v-model="newFormInline.roles" placeholder="请选择角色" class="w-full" clearable multiple filterable multiple-limit="1" >
            <el-option v-for="(item, index) in newFormInline.roleList" :key="index" :label="item.name" :value="item.id"/>
          </el-select>
          <el-select  v-if="newFormInline.roles.includes(114)" v-model="newFormInline.site_group" placeholder="请选择分组" class="w-full" clearable multiple filterable>
            <el-option v-for="(item, index) in newFormInline.groupList" :key="index" :label="item.name" :value="item.id"/>
          </el-select>
          <el-text class="mx-1" size="small"><el-icon><InfoFilled /></el-icon>组长对应的权限为自己所在的部门，业务员的权限仅为自己</el-text>

        </el-form-item>
      </re-col>
      <re-col>
        <el-form-item label="IP白名单">
          <el-input v-model="newFormInline.ip_list" placeholder="不填为所有IP都可以访问，多条以回车换行" type="textarea"/>
        </el-form-item>
      </re-col>
      <re-col>
        <el-form-item label="备注">
          <el-input v-model="newFormInline.remark" placeholder="请输入备注信息" type="textarea"/>
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>
